<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="xbsj-labels" content="Earth示例">
    </meta>
    <title>效果-太阳/月亮/星空</title>
    <!-- 0 引入js文件：XbsjEarth.js和vue.min.js -->
    <script src="../../XbsjEarth/XbsjEarth.js"></script>
    <script src="./scripts/vue.min.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        .box span{
            display: block;
            margin-top: 5px;
        }

        .defultbtn {
            display: inline-block;
            text-align: center;
            min-width: 60px;
            height: 38px;
            padding: 0 10px;
            line-height: 38px;
            border-radius: 100px;
            border: 1px solid #C9C9C9;
            background-color: #FFF;
            color: #555;
            cursor: pointer;
        }

        .defultbtn:hover {
            background-color: #b3daf8;
        }

        .btnon {
            background-color: #1E9FFF;
            color: #fff;
            border: 1px solid #1E9FFF;
        }

        input {
            width: 150px;
        }

        .checkbox {
            display: inline-block;
            cursor: pointer;
        }

        .bloombox {
            width: 20px;
            height: 16px;
            cursor: pointer;
        }

    </style>
</head>

<body>
    <div id="vueApp" style="width: 100%; height: 100%; background: grey; position: relative;">
        <earth-comp></earth-comp>
    </div>

    <script>
        // 1 创建Earth的vue组件
        var EarthComp = {
            template: `
                <div style="width: 100%; height: 100%">
                    <div ref="earthContainer" style="width: 100%; height: 100%">
                    </div>
                    <div class="box" style="position: absolute; left: 18px; top: 18px; color: white; padding: 20px; border-radius: 25px;min-width:150px; font-size:24px; font-family: 宋体;">
                            <div class="defultbtn" :class="{'btnon':sunenabled}" @click="sunclick">太阳</div>
                            <div class="defultbtn" :class="{'btnon':moonenabled}" @click="moonclick">月亮</div>
                            <div class="defultbtn" :class="{'btnon':skyBoxenabled}" @click="skyBoxenabled = !skyBoxenabled">星空</div>
                            <div class="defultbtn" @click="earthClick">回到地球</div>
                            <span>发光比率：{{glowFactor}}</span><input type="range" min="0.1" step="0.1" max="10" v-model.number="glowFactor">
                            <span @click="bloom = !bloom" class="checkbox"><input class="bloombox" type="checkbox" v-model="bloom">是否泛光</span><br/>
                        </div>
                </div>
            `,
            data() {
                return {
                    _earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
                    sunenabled: true,
                    glowFactor: 0,
                    bloom: true,
                    moonenabled: true,
                    skyBoxenabled: true,
                };
            },
            // 1.1 资源创建
            mounted() {
                // 1.1.1 创建地球
                var earth = new XE.Earth(this.$refs.earthContainer);

                this._earth = earth;

                // 1.1.2 场景配置
                // 默认显示天地图影像
                earth.sceneTree.root = {
                    "children": [
                        {
                            "czmObject": {
                                "name": '离线影像',
                                "xbsjType": "Imagery",
                                "xbsjImageryProvider": XE.Obj.Imagery.defaultImageryProviderConfig,
                            }
                        }
                    ]
                }

                // 1.1.3 数据绑定
                this._sunUnbind = XE.MVVM.bind(this, 'sunenabled', earth.weather.sun, 'enabled');
                this._glowFactorUnbind = XE.MVVM.bind(this, 'glowFactor', earth.weather.sun, 'glowFactor');
                this._bloomUnbind = XE.MVVM.bind(this, 'bloom', earth.weather.sun, 'bloom');
                this._moonUnbind = XE.MVVM.bind(this, 'moonenabled', earth.weather.moon, 'enabled');
                this._skyBoxbind = XE.MVVM.bind(this, 'skyBoxenabled', earth.weather.skyBox, 'enabled');

                // 1.1.4 设置默认值
                earth.weather.sun.glowFactor = 7;

                // only for Debug
                window.earth = earth;
            },
            methods: {
                sunclick() {
                    this.sunenabled = !this.sunenabled;
                    // 飞到太阳位置
                    var viewer = this._earth.czm.viewer;
                    var p = this._earth.weather.sunPosition;

                    viewer.camera.flyTo({
                        destination: new Cesium.Cartesian3(
                            -p.x / 1000,
                            -p.y / 1000,
                            -p.z / 2000
                        ),
                        orientation: {
                            heading: 0,
                            pitch: Cesium.Math.toRadians(-90.0),
                            roll: 0.0
                        }
                    });
                },
                moonclick() {
                    this.moonenabled = !this.moonenabled;
                    // 飞到月亮位置
                    var viewer = this._earth.czm.viewer;
                    var p = this._earth.weather.moonPosition;

                    viewer.camera.flyTo({
                        destination: new Cesium.Cartesian3(p.x / 1.2, p.y / 1.2, p.z / 1.2),
                        orientation: {
                            heading: 0,
                            pitch: Cesium.Math.toRadians(90.0),
                            roll: 0.0
                        }
                    });
                },
                earthClick() {
                    // 飞回地球
                    // earth.camera.position.toString()和earth.camera.toAllJSONStr()这两个方法可获取相机位置
                    earth.camera.flyTo([2.1031217486531673,0.5041647748838838,21021415.83325694], 0, [6.283185307179586,-1.5705982258639,0]);
                }
            },
            // 1.2 资源销毁
            beforeDestroy() {
                // vue程序销毁时，需要清理相关资源
                this._sunUnbind = this._sunUnbind && this._sunUnbind();
                this._glowFactorUnbind = this._glowFactorUnbind && this._glowFactorUnbind();
                this._bloomUnbind = this._bloomUnbind && this._bloomUnbind();
                this._moonUnbind = this._moonUnbind && this._moonUnbind();
                this._skyBoxbind = this._skyBoxbind && this._skyBoxbind();
                this._earth = this._earth && this._earth.destroy();
            },
        }

        // 2 创建vue程序
        // XE.ready()用来加载Cesium.js等相关资源
        XE.ready().then(() => {
            var app = new Vue({
                el: '#vueApp',
                components: {
                    EarthComp,
                },
            });
        });
    </script>
</body>

</html>